<template>
  <div id="app">
    <LEFT>
      <!-- 将内容插入到 LEFT 组件的 other 区域 -->
      <template v-slot:otherContent>
        <div class="content">
          <div class="head">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
          </div>
          <div id="center"></div>
        </div>
      </template>
    </LEFT>
  </div>
</template>
    
    <script>
import { onMounted } from "vue";
import LEFT from "../../components/left/index.vue";
import { color } from "echarts";
export default {
  name: "index",
  components: {
    LEFT,
  },
  data() {
    return {};
  },
  methods: {
    loaded() {
      // 检查本地存储中是否有 token
      if (localStorage.getItem("token") === null) {
        this.$router.push("/login"); // 重定向到登录页面
      }
    },

    echartsone() {
      var myChart = this.$echarts.init(document.getElementById("one"));
      var option = {
        title: {
          text: "服务资源",
          left: "left",
          color: "#000",
        },
        series: [
          {
            type: "pie",

            data: [
              {
                value: 100,
                name: "代码生成",
              },
              {
                value: 200,
                name: "日志操作",
              },
              {
                value: 300,
                name: "数据挖掘",
              },
              {
                value: 400,
                name: "权限控制",
              },
              {
                value: 500,
                name: "缓存监控",
              },
            ],
            roseType: "area",
            emphasis: {
              // 鼠标悬停时的高亮样式设置
              scale: true, // 是否放大扇区，默认为true（放大）
              focus: "series", // 鼠标悬停时仅对扇区有效
              label: {
                show: true, // 显示标签
                fontSize: "16",
                fontWeight: "bold",
              },
              labelLine: {
                show: true, // 显示标签引导线
              },
            },
          },
        ],
        tooltip: {
          trigger: "item", // 触发类型，默认为鼠标悬停触发
          formatter: "{a} <br/>{b}: {c} ({d}%)", // 提示框内容的格式化字符串
        },
      };

      myChart.setOption(option);
    },
    echartstwo() {
      var myChart = this.$echarts.init(document.getElementById("two"));
      var option = {
        title: {
          text: "职业发展",
          left: "left",
          color: "#000",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 626,
                name: "前端工程师",
              },
              {
                value: 834,
                name: "JAVA开发",
              },
              {
                value: 848,
                name: "C++开发",
              },
              {
                value: 535,
                name: "运维工程师",
              },
              {
                value: 510,
                name: "测试工程师",
              },
              {
                value: 335,
                name: "产品经理",
              },
              {
                value: 310,
                name: "UI设计师",
              },
              {
                value: 335,
                name: "运营",
              },
              {
                value: 310,
                name: "其它",
              },
            ],
          },
        ],
        tooltip: {
          trigger: "item", // 触发类型，默认为鼠标悬停触发
          formatter: "{a} <br/>{b}: {c} ({d}%)", // 提示框内容的格式化字符串
        },
      };

      myChart.setOption(option);
    },
    echartsthree() {
      var myChart = this.$echarts.init(document.getElementById("three"));
      var option = {
        title: {
          text: "一周系统访问量",
          left: "left",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "访问量",
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}",
                },
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            var result = params[0].name + "<br/>";
            params.forEach(function (item) {
              result +=
                item.marker + item.seriesName + " : " + item.value + "<br/>";
            });
            return result;
          },
        },
      };
      myChart.setOption(option);
    },
    echartsfour() {
      var myChart = this.$echarts.init(document.getElementById("center"));
      var option = {
        title: {
          text: "用户注册数量",
          left: "left",
          color: "#000",
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "注册数量",
            data: [
              300, 450, 380, 500, 610, 700, 800, 950, 1020, 1150, 1250, 1300,
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}",
                },
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            var result = params[0].name + "<br/>";
            params.forEach(function (item) {
              result +=
                item.marker + item.seriesName + " : " + item.value + "<br/>";
            });
            return result;
          },
        },
      };
      myChart.setOption(option);
    },
  },

  mounted() {
    this.loaded();
    this.echartsone();
    this.echartstwo();
    this.echartsthree();
    this.echartsfour();
    //模拟token失效场景
    this.$http.get("/captchaImage").then((res) => {
      console.log(res.data);
    });
  },
};
</script>
  
<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .head {
      width: 100%;
      height: 300px;
      display: flex;
      #one {
        width: 33.33%;
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
      }
      #two {
        width: 33.33%;
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
      }
      #three {
        width: 33.33%;
        height: 100%;
        background-color: #fff;
      }
    }
    #center {
      width: 100%;
      height: 550px;
      margin: 20px 0px;
      background-color: #fff;
    }
  }
}
</style>